<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/shoppingcart.css">
    <link rel="stylesheet" href="css/public.css">
    <title>购物车</title>
</head>
<body>
    <div class="header">
        <div class="header_all">
            <a href="index.html"><img src="image/car_1.jpg" draggable="false"></a>
            <img src="image/car_2.jpg" draggable="false">
        </div>
    </div>
    <div class="car">
        <div class="car_all">
            <p>现在&nbsp;<a href="login.html">登录</a>&nbsp;您的购物车中的商品将被永久保存</p>
            <div class="title">
                <ul>
                    <li><input type="checkbox" name="allid" onclick="qx(this.checked)">全选</li>
                    <li>商品名称</li>
                    <li>发货站</li>
                    <li>价格</li>
                    <li>数量</li>
                    <li>金额小计</li>
                    <li>操作</li>
                </ul>
            </div>
            <div class="content">
                <!-- <ul>
                    <li><input type="checkbox" name="userid" onclick="qxs(this.checked)"></li>
                    <li><img src="image/shoppingcart_1.jpg"><a href="#">飒飒assassin阿萨 是飒飒</a></li>
                    <li>中国大陆</li>
                    <li>价格</li>
                    <li><div id="minus">-</div><input type="text"><div id="plus">+</div></li>
                    <li>金额小计</li>
                    <li><span id="del">删除</span></li>
                </ul> -->
            </div>
           
            <div class="jiesuan">
                <div class="jiesuan_left">
                    <input type="checkbox" name="allid" onclick="qx(this.checked)"><label>全选</label>
                    <span><img src="image/del.jpg">删除选中购物车</span>
                    <div class="jiesuan_left_bottom"><a href="index.html">继续购物</a></div>
                </div>
                
                <div class="jiesuan_right">商品金额总计(不含税金和运费)：<span id="jiesuan"></span>
                    <div class="jiesuan_right_bottom"><a href="order.html">立即结算</a></div>
                </div>
            </div>
            <div class="like">
                <div class="like_all">
                    <p>猜你喜欢</p>
                    <div class="like_pro">
                        <ul>
                            <li>
                                <img src="image/car_3.jpg">
                                <p>CARAT*/克罗白色924</p>
                                <span>532元</span>
                            </li>
                            <li>
                                <img src="image/car_3.jpg">
                                <p>CARAT*/克罗白色924</p>
                                <span>532元</span>
                            </li>
                            <li>
                                <img src="image/car_3.jpg">
                                <p>CARAT*/克罗白色924</p>
                                <span>532元</span>
                            </li>
                            <li>
                                <img src="image/car_3.jpg">
                                <p>CARAT*/克罗白色924</p>
                                <span>532元</span>
                            </li>
                            <li>
                                <img src="image/car_3.jpg">
                                <p>CARAT*/克罗白色924</p>
                                <span>532元</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="bottom"><img src="image/car_bottom_02.jpg" draggable="false"></div>
        </div>
    </div>
</body>
</html>
<script src="js/jquery-1.11.0.js"></script>
<script src="js/cookie.js"></script>
<script src="js/public.js"></script>
<script src="js/ajax.js"></script>
<script>
    //全选
    function qx(val){ 
        $("input[name='userid']").each(function() {  
         this.checked = val;  
        }); 
    } 
    //获取用户id
    var content = document.querySelector(".content")
    var uid = getCookie("uname");
    console.log(uid);
    var url =`http://jx.xuzhixiang.top/ap/api/cart-list.php?id=${uid}`;
    console.log(url)
    var sum = 0;
    var sum1 = 0;
	ajax(url,function(res){
        var obj = res;
        for( var i = 0 ; i < obj.data.length ; i++ ){
            var num = parseInt(obj.data[i].pnum);
            var pprice = parseInt(obj.data[i].pprice)

            //sum = num*pprice
            var html = ""
            html = `<ul>
                <li><input type="checkbox" name="userid" onclick="qxs(this.checked)"></li>
                <li><img src="${obj.data[i].pimg}"><a href="productdetails.html">${obj.data[i].pname}</a></li>
                <li>中国大陆</li>
                <li>￥${obj.data[i].pprice}</li>
                <li><div class="minus">-</div><input type="text" value="${obj.data[i].pnum}" class="ipt"><div class="plus">+</div></li>
                <li>￥${num*pprice}</li>
                <li><span id="del">删除</span></li>
            </ul>`;
            content.innerHTML += html;
            //添加+-
            var ipt = document.querySelectorAll(".ipt")
            var plus = document.querySelectorAll(".plus")
            var minus = document.querySelectorAll(".minus")
            var del = document.querySelectorAll("#del")
            for(let j = 0; j < ipt.length ; j++) {
                minus[j].onclick = function() {
                    ipt[j].value -= 1;
                    //obj.data[i].pnum -= 1;
                    var aurl = `http://jx.xuzhixiang.top/ap/api/cart-update-num.php?uid=${uid}&pid=${obj.data[j].pid}&pnum=${ipt[j].value}`
                    ajax(aurl, function(res1) {
                        console.log(res1)
                    })
                }
                plus[j].onclick = function() {
                    var m = ipt[j].value
                    m = parseInt(m) + 1
                    ipt[j].value = m
                    console.log(ipt[j].value)
                    //obj.data[i].pnum += 1;
                    var url2 = `http://jx.xuzhixiang.top/ap/api/cart-update-num.php?uid=${uid}&pid=${obj.data[j].pid}&pnum=${ipt[j].value}}`
                    ajax(url2, function(res) {
                        console.log(res)
                    })
                }
                //点击删除
                del[j].onclick = function(){
                    if(confirm("确定删除？")){

                    del[j].parentNode.parentNode.remove()
                    var url3 = `http://jx.xuzhixiang.top/ap/api/cart-delete.php?uid=${uid}&pid=${obj.data[j].pid}`;
                        ajax(url3,function(res){
                        console.log(res)
                        })
                    }
                }           
            }
            //结算
            sum1 += num*pprice;
            console.log(sum1)
            $id("jiesuan").innerHTML = sum1;
            console.log(obj.data)
        }
    })
</script> 